<template>
  <!-- 创建时间：2023/4/20 -->
  <!-- 作者：admin -->
  <!-- SingerListDetailPage组件说明：歌手详情页面 -->
    <div class="singer-list" v-loading.fullscreen.lock="isLoading">
        <el-row>
            <el-col :span="24">
                <SingerDetailHeader :details="singerInfo"/>
            </el-col>
        </el-row>
        <el-divider></el-divider>
        <el-row>
            <el-col :span="24">
                <HotSongPart :hot-song-list="singerHotSongs"/>
            </el-col>
        </el-row>
        <!--专辑部分-->
        <el-row>
            <el-col :span="24">
                <SongPart :music-list="albumInfo"/>
            </el-col>
        </el-row>
        <!-- mv部分-->
        <el-row v-show="singerMvs.mvs.length">
            <el-col :span="24">
                <SongPart :music-list="MvsInfo"/>
            </el-col>
        </el-row>
        <!-- EP和单曲部分-->
        <el-row>
            <el-col :span="24">
                <SongPart :music-list="EPsInfo"/>
            </el-col>
        </el-row>
        <BackToHead/>
    </div>
</template>

<script>
import SingerDetailHeader from "@/components/SingerDetailHeader.vue";
import {getSingerHotSong, getSingersAlbum, getSingersDetailInfo, getSingersMvs} from "@/http";
import {formatArray} from "@/http/tools";
import {ALUBMLISTNOAUTHOR, ALUBMLISTNOAUTHORWITHTYPE, SINGERHOTSONGS, SINGERSMVs} from "@/http/constant";
import SongPart from "@/components/SongPart.vue";
import HotSongPart from "@/components/HotSongPart.vue";
import BackToHead from "@/minicomponents/BackToHead.vue";

export default {
    name: "SingerListDetailPage",
    props: ['id'],
    components: {BackToHead, HotSongPart, SongPart, SingerDetailHeader},
    data() {
        return {
            columnsNum: 5,
            isLoading: true,
            singerInfo: {},
            allAlbums: {
                // 专辑
                albums: [],
                // EP和单曲
                EP: []
            },
            singerMvs: {
                hasMore: false,
                mvs: []
            },
            // 歌手的热门歌曲
            singerHotSongs: {
                title: "热门歌曲",
                type: SINGERHOTSONGS,
                specialRoutes: "#",
                musicList: [],
                isShowAll: false,
                isChange: false,
                singers: ''
            },
            dataId: -1
        }
    },
    methods: {
        /**
         * 获取歌手的详细信息
         * @param id  歌手的id
         */
        getSingerDetail(id) {
            this.isLoading = true
            getSingersDetailInfo(id).then(res => {
                const {code, data: {artist}} = res
                if (code === 200) {
                    const {id, avatar, name, alias, briefDesc, albumSize, musicSize, mvSize} = artist
                    this.singerInfo = {
                        id,
                        avatar,
                        name,
                        albumSize,
                        musicSize,
                        mvSize,
                        alias,
                        description: briefDesc
                    }
                    return Promise.all([getSingersAlbum(id, albumSize), getSingersMvs(id), getSingerHotSong(id)])
                }
            }).then(res => {
                const [totalAlbums, totalMvs, hotSongs] = res
                const {hotAlbums, artist} = totalAlbums
                // 筛选出来全部专辑
                const newAlbums = hotAlbums.filter(item => {
                    return item.type === '专辑'
                })
                const EPs = hotAlbums.filter(item => {
                    return item.type !== '专辑'
                }).sort((first, second) => {
                    return first.publishTime > second.publishTime
                })
                // console.log(EPs[0])
                this.allAlbums = {
                    albums: formatArray(Math.ceil(newAlbums.length / this.columnsNum), this.columnsNum, newAlbums),
                    EP: formatArray(Math.ceil(EPs.length / this.columnsNum), this.columnsNum, EPs)
                }

                // 处理mv信息
                const {mvs, hasMore} = totalMvs
                this.singerMvs = {
                    hasMore: hasMore,
                    mvs: formatArray(2, this.columnsNum, mvs)
                }

                // 处理热门的50首歌曲
                const {songs} = hotSongs
                this.$set(this.singerHotSongs, 'musicList', formatArray(Math.ceil(songs.length / this.columnsNum), this.columnsNum, songs))
                this.$set(this.singerHotSongs, 'singers', artist.id)
                this.isLoading = false
            })
            // const getInfo = []
            // Promise.all(getInfo).then(res => {
            //     console.log(res)
            // })
        }
    },
    /**
     * 当前路由改变，也就是当前组件被复用的时候调用
     * @param to    要到那个路由中
     * @param from  从哪个路由过来的
     * @param next  继续执行下一步
     */
    beforeRouteUpdate(to, from, next) {
        const {params: {id}} = to
        // 更新数据
        this.getSingerDetail(id)
        next()
    },
    activated() {
        const {id, dataId} = this
        if (String(id) !== String(dataId)) {
            this.getSingerDetail(id)
        }
        this.dataId = id
    },
    computed: {
        // 专辑信息
        albumInfo() {
            return {
                title: "专辑",
                // 1表示是新专速递
                type: ALUBMLISTNOAUTHOR,
                specialRoutes: "#",
                musicList: this.allAlbums.albums,
                isShowAll: false,
                isChange: false
            }
        },
        // ep和单曲信息
        EPsInfo() {
            return {
                title: "EP和单曲",
                type: ALUBMLISTNOAUTHORWITHTYPE,
                specialRoutes: "#",
                musicList: this.allAlbums.EP,
                isShowAll: false,
                isChange: false
            }
        },
        // mv信息
        MvsInfo() {
            return {
                title: "Mvs",
                type: SINGERSMVs,
                specialRoutes: "#",
                musicList: this.singerMvs.mvs,
                isShowAll: this.singerMvs.hasMore,
                isChange: false,
                otherInfo: {
                    singerId: this.id,
                    singerName: this.singerInfo.name
                }
            }
        }
    }
}
</script>

<style scoped>

</style>